<script>
import outMain from "@/components/outMain.vue";
import * as echarts from "echarts";
import { supTotal } from "@/http/api";
export default {
  components: { outMain },
  name: "",
  data() {
    return {
      loading: true,
      tableData: [],
      formData: {},
    };
  },
  props: {},
  setup() {},
  methods: {
    linkFn(url, id, type) {
      this.$router.push({ path: url, query: { id: id, type: type } });
    },
    setMoney() {
      let timeArr = [];
      let data1 = []; //小程序
      let data2 = []; //企业
      let data3 = []; //船东
      let data4 = []; //培训
      for (let item in this.formData.syqs) {
        timeArr.push(item);
        data1.push(Number(this.formData.syqs[item].xcx_money));
        data2.push(Number(this.formData.syqs[item].qy_money));
        data3.push(Number(this.formData.syqs[item].cd_money));
        data4.push(Number(this.formData.syqs[item].px_money));
      }
      let chart = echarts.init(this.$refs.chartDay);
      let option = {
        title: {
          text: "收益趋势",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["小程序端", "企业端", "船东端", "培训端"],
        },
        xAxis: {
          type: "category",
          data: timeArr,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "小程序端",
            type: "line",
            data: data1,
          },
          {
            name: "企业端",
            type: "line",
            data: data2,
          },
          {
            name: "船东端",
            type: "line",
            data: data3,
          },
          {
            name: "培训端",
            type: "line",
            data: data4,
          },
        ],
      };
      chart.setOption(option);
    },
    setUnderMoney() {
      let data = this.formData.sytj;
      let chart = echarts.init(this.$refs.underLeft);
      let option = {
        title: {
          text: "收益统计",
          left: "left",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          left: "right",
        },
        series: [
          {
            name: "平台收益",
            type: "pie",
            radius: "55%",
            data: [
              { value: Number(data.xcx_money), name: "小程序" },
              { value: Number(data.qy_money), name: "企业" },
              { value: Number(data.cd_money), name: "船东" },
              { value: Number(data.px_money), name: "培训" },
            ],
            label: {
              normal: {
                show: true,
                formatter: "{b}: {d}%",
              },
            },
          },
        ],
      };
      chart.setOption(option);
    },
    getData() {
      supTotal().then((res) => {
        if (res.data.code == 1) {
          this.formData = res.data.data;
          this.tableData = res.data.data.zhgl;
          this.setMoney();
          this.setUnderMoney();
          this.loading = false;
        }
      });
    },
    computUser() {
      let cout = 0;
      let data = this.formData.ptzyh;
      console.log(this.formData);
      if (data.yesterday_sum) {
        cout =
          ((data.today_sum - data.yesterday_sum) / data.yesterday_sum) * 100;
      } else {
        cout = data.today_sum * 100;
      }
      return cout;
    },
  },
  mounted() {
    this.getData();
  },
  created() {},
};
</script>
<template>
  <outMain>
    <div v-loading="loading">
      <div class="topCont">
        <div class="topCardCont">
          <div class="cardItem" @click="linkFn('/salaSign', '', 2)">
            <div class="cardItemTop">
              <div class="iconfont icon-yiqianyue_yiqianyue cardColor"></div>
              <div class="cardKpi">
                <div class="cardKpiNum kpiColor">
                  <div class="iconfont icon-iconup"></div>
                  <div>{{ formData.lzcy_cd?.today_sum }}</div>
                </div>
                <div class="cardKpiDes">今日离职</div>
              </div>
            </div>
            <div class="cardName">离职船员(船东)</div>
            <div class="cardNum">{{ formData.lzcy_cd?.total_sum }}</div>
          </div>
          <div class="cardItem" @click="linkFn('/salaSign', '', 1)">
            <div class="cardItemTop">
              <div class="iconfont icon-yiqianyue_yiqianyue cardColor2"></div>
              <div class="cardKpi">
                <div class="cardKpiNum kpiColor2">
                  <div class="iconfont icon-iconup"></div>
                  <div>{{ formData.lzcy_qy?.today_sum }}</div>
                </div>
                <div class="cardKpiDes">今日离职</div>
              </div>
            </div>
            <div class="cardName">离职船员(企业)</div>
            <div class="cardNum">{{ formData.lzcy_qy?.total_sum }}</div>
          </div>
          <div class="cardItem" @click="linkFn('/salaPublic')">
            <div class="cardItemTop">
              <div class="iconfont icon-yiqianyue_yiqianyue cardColor3"></div>
              <div class="cardKpi">
                <div class="cardKpiNum kpiColor3">
                  <div class="iconfont icon-iconup"></div>
                  <div>{{ formData.xxxjl?.total_sum }}</div>
                </div>
                <div class="cardKpiDes">较昨日</div>
              </div>
            </div>
            <div class="cardName">小程序简历</div>
            <div class="cardNum">{{ formData.xxxjl?.total_sum }}</div>
          </div>
          <div class="cardItem" @click="linkFn('/salaSelf')">
            <div class="cardItemTop">
              <div class="iconfont icon-yiqianyue_yiqianyue cardColor4"></div>
              <div class="cardKpi">
                <div class="cardKpiNum kpiColor4">
                  <div class="iconfont icon-iconup"></div>
                  <div>{{ formData.rckjl?.total_sum }}</div>
                </div>
                <div class="cardKpiDes">较昨日</div>
              </div>
            </div>
            <div class="cardName">人才库简历</div>
            <div class="cardNum">{{ formData.rckjl?.total_sum }}</div>
          </div>
          <div class="cardItem cardItem2" @click="linkFn('/homeUser')">
            <div class="cardItemTop">
              <div class="iconfont icon-yiqianyue_yiqianyue cardColor"></div>
            </div>
            <div class="cardName">平台总用户</div>
            <div class="cardNum">{{ formData.ptzyh?.total }}</div>
            <div class="cardKpi">
              <div class="cardKpiNum kpiColor">
                <div
                  v-if="!loading && computUser() >= 0"
                  class="iconfont icon-shangsheng"
                ></div>
                <div class="iconfont icon-xiajiang" v-else></div>
              </div>
              <div class="cardKpiDes" v-if="formData.ptzyh && !loading">
                较昨日增长{{ computUser() }}%({{ formData.ptzyh.today_sum }})
              </div>
            </div>
          </div>
          <div class="cardItem cardItem2">
            <div class="cardItemTop">
              <div class="iconfont icon-yiqianyue_yiqianyue cardColor2"></div>
            </div>
            <div class="cardName">用户活跃度(今日)</div>
            <div class="cardNum">{{ formData.yhhyd }}</div>
          </div>
        </div>
        <div class="topRight">
          <div class="echartsMoney" ref="chartDay"></div>
        </div>
      </div>
      <div class="underCont">
        <div class="underLeft" ref="underLeft"></div>
        <div class="underTable">
          <div class="underTableTitle">账号管理</div>
          <el-table
            class="tableMain"
            :data="tableData"
            stripe
            style="width: 100%"
          >
            <el-table-column
              prop="name"
              show-overflow-tooltip
              label="账号类型"
            />
            <el-table-column
              prop="zcsl"
              show-overflow-tooltip
              label="正常数量"
            />
            <el-table-column
              prop="jysl"
              show-overflow-tooltip
              label="禁用数量"
            />
            <el-table-column
              prop="dqsl"
              show-overflow-tooltip
              label="到期数量"
            />
          </el-table>
        </div>
      </div>
    </div>
  </outMain>
</template>
<style scoped lang="less"></style>
